<template>
  <Modal v-model:visible="isShow" :title="t('自定义头像')" :zindex="1000">
    <div class="popup_body">
      <div class="form_card">
        <div class="form_container vertical">
          <div class="body vertical center">
            <!-- 表格 -->
            <div class="table_box">
              <div class="list_item" v-for="(item, index) in dataList" :key="index">
                <img :class="curTab == item.value && 'active'" :src="`/imgs/head_icons/${item.value}.webp`" @click="clickTab(item)"/>
              </div>
              <div class="list_item">
                <nut-uploader
                    accept=".jpg,.jpeg,.png,.gif,.webp"
                    :before-xhr-upload="beforeUpload"
                    @delete="(e) => {removeImg(e)}"
                ></nut-uploader>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="submit_btn">
        <Btn height="44px" width="200px" @click="submitAction" class="submit">{{ t('home_page_confirm') }}</Btn>
      </div>
    </div>

  </Modal>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import Modal from '@/components/Modal.vue'
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { User } from '@/store/user.ts';
import pinia from '@/store';
import Btn from "@/components/Btn.vue";
import {showNotify} from "@nutui/nutui";
// import { Page } from '@/store/page';
// const page = Page();
// const { settings } = storeToRefs(page);

const { t } = useI18n();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
const UserStore = User(pinia);
const emit = defineEmits(['update:visible']);
const { roleInfo } = storeToRefs(UserStore);

const curTab: any = ref(roleInfo.value.head_photo);
const dataList: any = ref([
  {value: '1001'},
  {value: '1002'},
  {value: '1003'},
  {value: '1004'},
  {value: '1005'},
  {value: '1006'},
  {value: '1007'},
  {value: '1008'},
  {value: '1009'},
  {value: '1010'},
  {value: '1011'},
  {value: '1012'},
]);

const isShow = computed({
  get: function () {
    return props.visible;
  },
  set: function (value) {
    emit('update:visible', value);
  },
});

const clickTab = (e: any) => {
  // console.log('*****', e)
  curTab.value = e.value
}
const submitAction = () => {
  console.log('&&&&&&&', curTab.value)
}
// 上传图片
const beforeUpload = (xhr: any, data: any) => {
  console.log(xhr)
  const file = data.sourceFile

  if (file && file.size > 1024 * 1024 * 2) { // 2MB限制
    showNotify.danger('文件大小不能超过2MB！')
    return;
  }
  const formData = new FormData();
  formData.append('avatar', file);
  formData.append('role_id', `${roleInfo.value.id}`);
  fetch(`http://18.167.175.195/api/upload/avatar`, {
    method: 'POST',
    body: formData,
  }).then(response => response.json()).then(response => {
    if (response.status == 200 || response.status == 'success') {
      const urlImg = response.data.path
      showNotify.success(response.message)
      console.log('&&&&&', urlImg)
    } else {
      showNotify.danger(response.message)
    }
  })
}
const removeImg = (e: any) => {
  console.log('删除---', e)
}

watch(() => roleInfo.value, (n) => {
  if (n) {
    console.log('====', n)
  }
})

</script>
<style lang="scss" scoped>
.popup_body {
  color: #fff;
  padding-bottom: 20px;

  .form_card {
    padding: 16px 20px;
    min-height: 240px;
    max-height: 300px;
    overflow-y: auto;

    .table_box {
      display: flex;
      flex-wrap: wrap;
      .list_item {
        display: flex;
        font-size: 12px;
        width: 57px;
        height: 57px;
        margin-left: 5px;
        margin-bottom: 10px;
        &:nth-child(5n + 6), &:nth-child(1) {
          margin-left: 0;
        }
        img {
          cursor: pointer;
          width: 56px;
          height: 56px;
          border: 2px solid #231353;
          border-radius: 50%;
          &.active {
            border-color: #ad95f6;
          }
        }
        :deep(.nut-uploader) {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .nut-uploader__upload {
            background: rgba(0,0,0,.7);
            border-radius: 10px;
          }
          .nut-uploader__upload, .nut-uploader__preview, .nut-uploader__preview-img {
            width: 100%;
            height: 100%;
            margin-right: 0;
            .close {
              color: #fff;
            }
          }
          .nut-uploader__preview__progress {
            display: none;
          }
        }
      }
    }
  }

  .submit_btn {
    display: flex;
    justify-content: center;
  }
}
</style>
